<template>
  <div>
    <el-date-picker
      v-model="curValue"
      v-bind="$attrs"
      @change="handleChange"
      @focus.capture="handleFocus"
    >
      <template v-for="(item, key, index) in $slots" :key="index" v-slot:[key]>
        <slot :name="key"></slot>
      </template>
    </el-date-picker>
  </div>
</template>

<script>
import moment from 'moment-timezone';
export default {
  props: {
    modelValue: [Date, Number, String, Array],
  },
  emits: ['update:modelValue', 'change'],
  data() {
    return {
      curValue: new Date(),
    };
  },
  watch: {
    curValue: {
      handler(value) {
        this.$emit('update:modelValue', value);
      },
    },
  },
  mounted() {
    console.log('xxx', this.$attrs);
    this.curValue = this.modelValue;
  },
  methods: {
    // 判断当前时区是否是夏令时
    handleChange(value) {
      if (value) {
        if (Array.isArray(value)) {
          value.map((v) => {
            let item = moment.tz(value, 'America/New_York');
            console.log('item', item, item.isDST());
            return v;
          });
        } else {
          let cur = moment.tz(value, 'America/New_York');
          console.log('cur', cur, cur.isDST());
        }
      }
      this.$emit('change', value);
    },
    handleFocus(v) {
      console.log('xxx', v);
      v.stopPropagation();
    },
    handleChangeLang() {
      let zh = require('element-plus/lib/locale/lang/zh-cn.js')['default'];
      let en = require('element-plus/lib/locale/lang/en.js')['default'];
      this.locale = this.count % 2 ? zh : en;
      console.log('xx', this.locale);
      this.count++;
      this.isShow = false;
      setTimeout(() => {
        this.isShow = true;
      }, 1000);
    },
  },
};
</script>

<style></style>
